<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>手术运营数据监管中心</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<link href="./css/comon0.css" rel="stylesheet" type="text/css">
	<link href="./css/index.css" rel="stylesheet" type="text/css">
	<link href="./css/common.css" rel="stylesheet" type="text/css">
	<link href="./css/swiper.min.css" rel="stylesheet" type="text/css">

</head>
<script>
	$(window).load(function () {
		$(".loading").fadeOut()
	})

	/****/
	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
		$(window).resize(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
		});
	});
</script>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.js"></script>
<script src="js/echarts-liquidfill.js"></script>
<script src="js/qs.js"></script>
<script src="js/swiper.js"></script>

<!-- 2. 引入样式 -->
<link href="js/elementIndex.css" rel="stylesheet">

<body>
	<div class="loading">
		<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
	</div>

	<div class="mainbox" id="app">
		<div class="shadow" v-show="mapShow">
			<div style="width: 86%;height: 9.5rem;margin-left:6%;margin-top: 1.5rem;border-radius: 10px">
				<div class="mapIframe2">
					<!-- <div style="width: 4%;height: 70%;background: linear-gradient(to right, #1E1F25, rgba(0, 0, 0, 0));z-index: 20;position: absolute;"></div>
                    <div style="width: 4%;height: 70%;background: linear-gradient(to left, #1E1F25, rgba(0, 0, 0, 0));z-index: 20;position: absolute;right: 2%;"></div> -->
					<iframe :src="RoomSrc" allowTransparency='true' frameborder='no' scrolling="no"
						allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%" height="100%"
						style=" border-radius: 10px;"></iframe>

					<!-- <iframe src="http://172.16.14.196:8080/location_op_screen/index_screen.html?initZoom=45&mapMarginLeft=135&mapMarginTop=20" allowTransparency='true' frameborder='no'
                        allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%" height="100%" style="border-radius: 10px"></iframe> -->

				</div>
			</div>
			<div @click="offMap" style="width: 0.6rem;height: 0.6rem;position: relative;left: 48%;top:-0.3rem">
				<img class="qx-icon" src="images/quxiao.png">
			</div>
		</div>

		<div class="infoStyle" v-show="infoShow">
			<div class="box-head">
				<div class="box-head" style="justify-content: left;">
					<span class="box-head-title">指标计算公式</span>
				</div>
			</div>
			<div style="padding-left: .4rem; ">
				<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: .1rem;">
					<img style="width: 0.125rem; height: 0.125rem;" referrerpolicy="no-referrer"
						src="images/Group 34067.png">
					<div class="info-text">
						<div>患者等待时长:</div>
						<div>∑（同一房间的患者入室时间 - 患者到达缓冲区时间） / 符合条件数量 （急诊除外）</div>
					</div>
				</div>
				<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: .1rem;">
					<img style="width: 0.125rem; height: 0.125rem;" referrerpolicy="no-referrer"
						src="images/Group 34067.png">
					<div class="info-text">
						<div>连台衔接时长:</div>
						<div>∑（同一房间的下台患者入室时间 - 上台患者出室时间） / 符合条件数量 （急诊除外）</div>
					</div>
				</div>
				<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: .1rem;">
					<img style="width: 0.125rem; height: 0.125rem;" referrerpolicy="no-referrer"
						src="images/Group 34067.png">
					<div class="info-text">
						<div>麻醉衔接时长:</div>
						<div>∑（同一房间的下台麻醉开始时间 - 上一台离开手术室时间）/ 符合条件数量 （急诊除外）</div>
					</div>
				</div>
				<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: .1rem;">
					<img style="width: 0.125rem; height: 0.125rem;" referrerpolicy="no-referrer"
						src="images/Group 34067.png">
					<div class="info-text">
						<div>手术衔接时长:</div>
						<div>∑（同一房间的下台手术开始时间 - 上一台手术结束时间）/ 符合条件数量 （急诊除外）</div>
					</div>
				</div>
				<div
					style="display: flex; justify-content: flex-start; align-items: first baseline; margin-bottom: .1rem;">
					<img style="width: 0.125rem; height: 0.125rem;" referrerpolicy="no-referrer"
						src="images/Group 34067.png">
					<div class="info-text">
						<div>全部手术间的使用率:</div>
						<div style="max-width: 6rem;">假定每间有手术的手术室计划开放时长为8小时（可配置），取手术室内每一台手术的患者出入手术室的时间（入室时间-出室时间）求和X。
						</div>
						<div style="max-width: 6rem;">∑(X/8)/符合条件手术室个数n</div>
					</div>
				</div>

			</div>
		</div>

		<ul class="clearfix">
			<!-- 左 -->
			<li class="li1">
				<!-- 左上 -->
				<div class="box1" style="height: 4.06rem">
					<div class="box-head">
						<span class="box-head-title">
							重点运营指标
						</span>
						<span class="box-head-title-y4">
							<div>今日计划首台</div>
							<div style="font-size: .25rem; line-height: .25rem;">{{UnitsToday}}</div>
							<div>台</div>
						</span>
					</div>

					<div style="width: 100%;height: 80%;position: absolute;" v-show="showShou2">
						<div style="width: 100%;height: 50%;padding: 1% 2%;">
							<div style="width:55%;height: 100%;float: left;">
								<div style="width:20%;height: 40%;left: 18%;top: 25%;position: absolute;">
									<div style="position: absolute;top: -20%;text-align: center;width: 1rem;">
										<span
											style="font-size: 0.2rem;font-weight: normal;font-family: Inter-Regular_SemiBold, Inter; color: rgb(48, 224, 161);">{{OnTimeOperRate2}}%</span>
									</div>
									<div style="position: absolute;top:5%;left:30%">
										<img class="nao-img" src="images/icon-naozhong.png" />
									</div>

								</div>

								<div class="text-percent">
									<span>0%</span>
									<span>100%</span>
								</div>

								<div style="position: absolute;top:42%; left:20%;">
									<span class="text-y3">今日准点开台率</span>
								</div>

								<div style="width:100%;height: 100%; ">
									<div id="shouDraw" style="width:2.6rem;height: 2.6rem;padding-top: 0% "></div>
								</div>


							</div>
							<div style="width:45%;height: 100%;float: left; ">
								<!-- <div
                                        style="position: relative;top: 0.25rem;left:0.3rem; width: 1.8rem;height: 0.2rem;">
                                        <span
                                            style="font-size: 0.2rem;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #E5E6ED">准点开台数</span>

                                        <span
                                            style="margin-left:0.05rem ;font-size: 0.3rem;font-family: Inter-Regular_SemiBold, Inter;font-weight: normal;color: #30E0A1;">
                                            {{OpenedOnSchedule}}
                                        </span>
                                        <span
                                            style="font-family: Inter-Regular_SemiBold, Inter;font-weight: normal;color: #30E0A1;font-size:0.15rem;">台</span>
                                    </div>

                                    <div
                                        style="position: relative;top: 0.45rem;left:0.3rem; width: 1.5rem;height: 0.4rem;background: #242833;border-radius: 10px;">
                                        <span
                                            style="color:#B0B8CD ;font-weight: 400;font-size: 0.15rem;position: absolute;top:0.1rem;left:0.15rem;">
                                            今日首台数
                                        </span>

                                        <span
                                            style="color:#FFFFFF ;font-weight: 400;font-size: 0.18rem;position: absolute;top:0.07rem;left:1rem ;">
                                            {{UnitsToday}}台
                                        </span>
                                    </div> -->
								<div class="lt-box1-item">
									<div style="display: flex; align-items: center;">
										<img class="rt-box1-icon" referrerpolicy="no-referrer"
											src="images/punctual.png">
										<div class="rt-box-text1" style="margin-left: .1rem;">准点</div>
									</div>
									<div class="rt-box-text4">{{OpenedOnSchedule}}台</div>

								</div>
								<div class="lt-box1-item">
									<div style="display: flex; align-items: center;">
										<img class="rt-box1-icon" referrerpolicy="no-referrer" src="images/delayed.png">
										<div class="rt-box-text1" style="margin-left: .1rem;">晚点</div>
									</div>
									<div class="rt-box-text4">{{lateSchedule}}台</div>

								</div>
								<div class="lt-box1-item">
									<div style="display: flex; align-items: center;">
										<img class="rt-box1-icon" referrerpolicy="no-referrer" src="images/waiting.png">
										<div class="rt-box-text1" style="margin-left: .1rem;">待开</div>
									</div>
									<div class="rt-box-text4">{{notStarted}}台</div>

								</div>

							</div>

						</div>





						<div v-if="hospitalNo!='BJJST'"
							style="width: 100%;height: 50%;padding: 1% 4%; display: flex; flex-wrap: wrap; justify-content: space-between;">

							<div class="lt-box2-item" style="margin-bottom: 0.1rem;">
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group34142.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">今日首台换台数</span>
									<span class="rt-box-text23">
										<div class="rt-box-text2"> {{firstOpeReplacementCount}}</div>
										<div class="rt-box-text3">&nbsp;台</div>
									</span>
								</div>
							</div>
							<div class="lt-box2-item">
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group34142.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">今日首台换台率</span>
									<span class="rt-box-text23">
										<div class="rt-box-text2">{{firstOpeReplacementRate}}%</div>
										<!-- <span class="rt-box-text3">&nbsp;%</span> -->
									</span>
								</div>
							</div>
							<div class="lt-box2-item">
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group34142.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">停台手术</span>
									<div class="rt-box-text23">
										<div class="rt-box-text2"> {{SurgeryStopCount}} </div>
										<div class="rt-box-text3">&nbsp;台</div>
									</div>
								</div>
							</div>
							<div class="lt-box2-item">
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group34142.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">非计划二次手术</span>
									<span class="rt-box-text23">
										<div class="rt-box-text2">{{secondarySurgery}}</div>
										<span class="rt-box-text3">&nbsp;台</span>
										<span>
								</div>
							</div>

						</div>



						<div v-if="hospitalNo=='BJJST'"
							style="width: 100%;height: 50%;padding: 1% 4%; display: flex; flex-wrap: wrap; justify-content: space-between;">

							<div
								style="width:100%;height: 49%;background-color: #242833 ;float: left;position: relative;border-radius: 10px;">
								<img class="image-icon" referrerpolicy="no-referrer"
									:src="hospitalNo!='SZC' ? 'images/imp-icon2.png' : 'images/imp-icon1.png'"
									style="position: absolute;top: 45%;left: 5%;">
								<span class="note-span3"
									style="position: absolute;margin-top: 5%;margin-left: 16%">今日首台换台数</span>
								<div class="" style="position:relative;float: right;margin-top: 6%;margin-right: 6%">
									<span class="note-span1">{{firstOpeReplacementCount}}</span>
									<span class="note-span2y">台</span>
								</div>
							</div>

							<div
								style="width:100%;height: 49%;margin-top:2%;background-color: #242833 ;float: left;position: relative;border-radius: 10px; ">
								<img class="image-icon" referrerpolicy="no-referrer" src="images/Group34248.png"
									style="position: absolute;top: 45%;left: 5%;">
								<span class="note-span3"
									style="position:absolute;margin-top: 5%;margin-left: 16%">今日首台换台率</span>
								<div class="" style="position:relative;float: right;margin-top: 6%;margin-right: 6%">
									<span class="note-span1">{{firstOpeReplacementRate}}%</span>
									<span class="note-span2y">台</span>
								</div>
							</div>
						</div>




					</div>
				</div>

				<!-- 左中 -->
				<div class="box3" style="height: 3.0rem; margin-top: 0.15rem;">
					<div class="box-head">
						<span class="box-head-title">手术平均结束时间</span>
					</div>
					<div ref="operAverageEndTime" style="width: 100%; height: 2.4rem;"></div>

				</div>

				<!-- 左下 -->
				<div class="box3" style="height: 3.0rem;margin-top:0.15rem ;">
					<div class="box-head">
						<span class="box-head-title">今日重点关注</span>
					</div>
					<div style="width: 100%;height: 80%;padding: 2% 0;margin-top:3%">
						<div style="width: 100%;height: 80%;padding: 1% 5%;">
							<div style="width:100%;height: 49%;margin-bottom: 3%">
								<div
									style="width:48%;height: 100%;background-color: #242833 ;float: left;position: relative;border-radius: 10px;">
									<img class="image-icon-y3" referrerpolicy="no-referrer"
										:src="hospitalSwitch === '002' ? 'images/imp-icon11.png ': 'images/imp-icon1.png'"
										style="position: absolute;top: 30%;left: 5%;">
									<!-- <img class="image-icon-y3" referrerpolicy="no-referrer" src="images/imp-icon1.png"
									style="position: absolute;top: 30%;left: 5%;"> -->
									<div class="note-div-span">
										<span class="note-span1">{{eightyCount}}</span>
										<span class="note-span2">台</span>
									</div>
									<span class="note-span5" v-text="hospitalNo!='SZC'?'80岁以上':'新生儿'"></span>
								</div>

								<div
									style="width:48%;height: 100%;background-color: #242833 ;float: left;position: relative;border-radius: 10px;margin-left: 3%;  ">
									<img class="image-icon-y3" referrerpolicy="no-referrer" src="images/imp-icon2.png"
										style="position: absolute;top: 30%;left: 5%;">

									<div class="note-div-span">
										<span class="note-span1">{{fourCount}}</span>
										<span class="note-span2">台</span>
									</div>
									<span class="note-span5" v-text="hospitalNo!='SZC'?'4岁以下':'婴幼儿'"></span>

								</div>


							</div>
							<div style="width:100%;height: 49%;margin-top: 2%;">

								<div
									style="width:48%;height: 100%;background-color: #242833 ;float: left;position: relative;border-radius: 10px; ">
									<img class="image-icon-y3" referrerpolicy="no-referrer" src="images/imp-icon3.png"
										style="position: absolute;top: 30%;left: 5%;">
									<div class="note-div-span">
										<span class="note-span1">{{specialOper}}</span>
										<span class="note-span2">台</span>
									</div>
									<span class="note-span5" v-text="hospitalNo!='SZC'?'特殊术式':'高风险麻醉'"></span>
								</div>
								<div
									style="width:48%;height: 100%;background-color: #242833 ;float: left;position: relative;border-radius: 10px;margin-left: 3%; ">
									<img class="image-icon-y3" referrerpolicy="no-referrer" src="images/imp-icon4.png"
										style="position: absolute;top: 30%;left: 5%;">
									<div class="note-div-span">
										<span class="note-span1">{{specialInfection}}</span>
										<span class="note-span2">台</span>
									</div>
									<span class="note-span5">特殊感染</span>
								</div>

							</div>

						</div>

					</div>
				</div>

			</li>

			<!-- 中 -->
			<li class="li2">
				<!-- 中上 -标志及时间 -->

				<!-- 展示医院logo -->
				<div style="height: 0.45rem;width:100%;position: relative">
					<div v-if="hospitalSwitch == '005'">
						<div class="image_10">
							<img class="image_9syLogo" referrerpolicy="no-referrer" src="images/logo2.png" />
							<span class="text-y0Logo">|</span>
							<!-- <img class="image_hosLogo" referrerpolicy="no-referrer" src="images/logoJST.png" /> -->
							<span class="text_y1Logo">手术运营数据监管中心</span>
						</div>

						<div style="width: 40% ;float: right; height: auto; ">
							<span class="text_y2">{{nowDate}}</span>
							<span class="text_y3">{{nowTime}}</span>
						</div>
					</div>

					<!-- 非积水潭不展示医院logo -->
					<div v-if="hospitalSwitch !== '005'">
						<div class="image_10">
							<img class="image_9" referrerpolicy="no-referrer" src="images/logo2.png" />
							<span class="text-y0">|</span>
							<span class="text_y1">手术运营数据监管中心</span>
						</div>

						<div style="width: 40% ;float: right; height: auto; ">
							<span class="text_y2">{{nowDate}}</span>
							<span class="text_y3">{{nowTime}}</span>
						</div>
					</div>

				</div>
				<!-- 中上 -各级手术台数 -->
				<div style="height: 0.5rem;width:100%;margin-bottom: 0.1rem">
					<div
						style="width: 25%;height: 100%;border-radius: 10px;text-align: center;float: left;position: relative;padding: 0 0.1rem 0 0;">
						<div
							style="width:100%;height: 100%;background-color: #1E1F25 ;float: left;position: relative;border-radius: 4px; ">
							<div
								style="width: 0.35rem;height: 0.35rem;position: absolute;left:0.15rem;top:0.07rem;text-align: center;">
								<img class="image-icon-y2" src="images/water4.png" />
								<span style="" class="note-span3">{{outputOne}}</span>
							</div>

							<span class="note-span4" style="position:relative;float: left;margin-top: 5%">一级手术</span>
							<div class="" style="position:relative;float: left;margin-left: 50%;top:20%">
								<span class="note-span1">{{outputOneCount}}</span>
								<span class="note-span2">台</span>
							</div>
						</div>
					</div>
					<div
						style="width: 25%;height: 100%;border-radius: 10px;text-align: center;float: left;position: relative;padding: 0 0.1rem 0 0.1rem">
						<div
							style="width:100%;height: 100%;background-color: #1E1F25 ;float: left;position: relative;border-radius: 4px; ">
							<div
								style="width: 0.35rem;height: 0.35rem;position: absolute;left:0.15rem;top:0.07rem;text-align: center;">
								<img class="image-icon-y2" referrerpolicy="no-referrer" src="images/water3.png">
								<span class="note-span3">{{outputTwo}}</span>
							</div>
							<span class="note-span4" style="position:relative;float: left;margin-top: 5%">二级手术</span>
							<div class="" style="position:relative;float: left;margin-left: 50%;top:20%">
								<span class="note-span1">{{outputTwoCount}}</span>
								<span class="note-span2">台</span>
							</div>
						</div>
					</div>
					<div
						style="width: 25%;height: 100%;border-radius: 10px;text-align: center;float: left;position: relative;padding: 0 0.1rem 0 0.1rem ;top: -0.045rem;">
						<div
							style="width:100%;height: 100%;background-color: #1E1F25 ;float: left;position: relative;border-radius: 4px; ">
							<div
								style="width: 0.35rem;height: 0.35rem;position: absolute;left:0.15rem;top:0.07rem;text-align: center;">
								<img class="image-icon-y2" referrerpolicy="no-referrer" src="images/water2.png">
								<span class="note-span3">{{outputThree}}</span>
							</div>

							<span class="note-span4" style="position:relative;float: left;margin-top: 5%">三级手术</span>
							<div class="" style="position:relative;float: left;margin-left: 50%;top:20%">
								<span class="note-span1">{{outputThreeCount}}</span>
								<span class="note-span2">台</span>
							</div>
						</div>
					</div>
					<div
						style="width: 25%;height: 100%;border-radius: 10px;text-align: center;float: left;position: relative;padding: 0 0 0 0.1rem ;top: -0.045rem;">
						<div
							style="width:100%;height: 100%;background-color: #1E1F25 ;float: left;position: relative;border-radius: 4px; ">
							<div
								style="width: 0.35rem;height: 0.35rem;position: absolute;left:0.15rem;top:0.07rem;text-align: center;">
								<img class="image-icon-y2" referrerpolicy="no-referrer" src="images/water1.png">
								<span class="note-span3">{{outputFour}}</span>
							</div>

							<span class="note-span4" style="position:relative;float: left;margin-top: 5%">四级手术</span>
							<div class="" style="position:relative;float: left;margin-left: 50%;top:20%">
								<span class="note-span1">{{outputFourCount}}</span>
								<span class="note-span2">台</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 中上 -今日手术量部分 -->
				<div class="box1" style="height: 3.0rem">

					<div class="block_117 ">
						<div class="block_118">
							<div class="group_204">
								<span class="text_132">今日手术量&nbsp</span>
								<span class="text_260">含已取消</span>
								<span class="text_260-oper">{{cancle}}</span>
							</div>
							<div>
								<div class="text_133">
									{{planCount}}
									<span class="section_125 ">台</span>
								</div>
							</div>
						</div>
						<div class="group_8">
							<div class="group_204">
								<img class="label_7" referrerpolicy="no-referrer" src="images/oper-icon1.png" />
								<span class="text-oper-type" style="position:relative; top:-0.05rem;">择期手术（台）</span>
							</div>
							<div class="zeClass">
								<div class="zeClass-1">
									{{chooseCount}}
								</div>
								<!--									<div class="zeClass-2"></div>-->
								<!--									<div class="zeClass-3">含临时{{temporaryCount}}</div>-->
							</div>
							<div class="group_29 flex-row">

								<div class="box_38 flex-col" style="text-align: center;">
									<div style="width: 100%;height: 50%;">
										<span class="text_135">{{chooseFinished}}</span>
									</div>
									<div style="width: 100%;height: 50%;">
										<span class="text_136">已完成</span>
									</div>

								</div>
								<div
									style="height: 0.65rem;width:0.65rem;z-index: 99;position: absolute;top: -0.38rem;left:-0.18rem">
									<img height="100%" src="./images/oper-icon21.png" width="100%">
								</div>
								<div id="operDraw1"
									style="height: 0.9rem;width: 0.9rem;z-index: 99;position: absolute;top:-0.495rem;left:-0.30rem; overflow: hidden; ">
								</div>
							</div>
						</div>

						<div class="group_8">
							<div class="group_204">
								<img class="label_7" referrerpolicy="no-referrer" src="images/oper-icon2.png" />
								<span class="text-oper-type" style="position:relative; top:-0.05rem;">急诊手术（台）</span>
							</div>
							<div>
								<div class="text_134">
									{{emergencyCount}}
								</div>

							</div>
							<div class="group_29 flex-row">
								<div class="box_388 flex-col" style="text-align: center;">
									<div style="width: 100%;height: 50%;">
										<span class="text_135">{{emergencyFinished}}</span>
									</div>
									<div style="width: 100%;height: 50%;">
										<span class="text_136">已完成</span>
									</div>
								</div>
								<div
									style="height: 0.65rem;width:0.65rem;z-index: 99;position: absolute;top: 0.1rem;left:-0.18rem">
									<img height="100%" src="./images/oper-icon21.png" width="100%">
								</div>
								<div id="operDraw2"
									style="height: 0.9rem;width: 0.9rem;z-index: 99;position: absolute;top:-0.01rem;left:-0.31rem">
								</div>
							</div>
						</div>

					</div>
					<div class="runTiao">
						<div
							style="width: 100%;height: 18%;font-size: 0.15rem;color: #757B8C;margin-top:6%; display: flex;">
							<div style="height: 100%;text-align: center;float: left;background: linear-gradient(270deg, #5c5d6b 0%, #565560  100%);text-align: center;border-radius: 15px;"
								:style="{flex: width1}">
								<!-- v-bind:style="{width:width1+'%'}" v-show="width1!=0" -->

								<div class="runTiao-img">
									<img height="100%" src="images/wks.png" width="100%">
									<span style="position: relative;top:-0.35rem;color: #fff;">
										{{beforeOper}}
									</span>
								</div>
								<span class="runTiao-span">待开始</span>
							</div>
							<div style="height: 100%;text-align: center;float: left;margin-left:-0.15rem;background: linear-gradient(270deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%);"
								:style="{flex: width2}">

								<div class="runTiao-img">
									<img height="100%" src="images/tiao2.png" width="100%">
									<span style="position: relative;top:-0.35rem;color: #fff;">
										{{opering}}
									</span>
								</div>
								<span class="runTiao-span">手术中</span>
							</div>
							<div style="height: 100%;text-align: center;float: left;margin-left:-0.15rem;background: linear-gradient(270deg, #21ABB7 0%, #72DD84 100%, #5ACE93 100%, #64D48D 100%);"
								:style="{flex: width3}">

								<div class="runTiao-img">
									<img height="100%" src="images/tiao3.png" width="100%">
									<span style="position: relative;top:-0.35rem;color: #fff;">
										{{afterOper}}
									</span>
								</div>
								<span class="runTiao-span">已完成</span>
							</div>
							<div style="height: 100%;text-align: center;float: left;margin-left:-0.15rem;background: linear-gradient(270deg, #2D6872 0%, #1A4F73 100%);text-align: center;border-radius: 0px 15px 15px 0px;"
								:style="{flex: width4}">
								<div class="runTiao-img">
									<img height="100%" src="images/tiao4.png" width="100%">
									<span style="position: relative;top:-0.35rem;color: #fff;">
										{{cancle}}
									</span>
								</div>
								<span class="runTiao-span">已取消</span>

							</div>
						</div>
					</div>

				</div>

				<!-- 中下 -->
				<div class="box4" style="height:6.18rem;">
					<!--					横板-->
					<div v-if="hospitalSwitch !== '005'&&hospitalSwitch !== '003'">
						<div class="box-head">
							<span class="box-head-title" style="margin-left: .26rem;">当前手术间状态</span>
							<span class="box-head-title-y2">
								<span>共</span>
								<span style="color: #fff;">{{totalRoom}}</span>
								<span>间手术房间</span>
							</span>
						</div>
						<div class="box4-content">
							<div class="box4-content-table">
								<div>
									<span class="box4-text-1">占用(间)</span>
									<span class="box4-text-2" style="color: #FF5067;">{{busyRoom}}</span>
								</div>
								<div>
									<span class="box4-text-1">接台等待(间)</span>
									<span class="box4-text-2" style="color: #FFC420;">{{waitRoom}}</span>
								</div>
								<div>
									<span class="box4-text-1">空闲(间)</span>
									<span class="box4-text-2" style="color: #69EF76;">{{freeRoom}}</span>
								</div>
								<!-- <div>
                                        <span class="box4-text-1">保洁中(间)</span>
                                        <span class="box4-text-2" style="color: #0297FD;">{{cleanCount}}</span>
                                    </div> -->
							</div>

							<div class="box4-content-map">
								<!-- <iframe
                                        src="http://192.168.1.144:8848/hsmap/location_op_screen/index_screen.html?initZoom=10&mapMarginLeft=-50&mapMarginTop=-30"
                                        allowTransparency='true' frameborder='no'
                                        allow="geolocation; microphone; camera; midi; encrypted-media;"
                                        width="100%" height="100%">
                                    </iframe> -->
								<iframe ref="iframeRef" :src="MapSrc" allowTransparency='true' frameborder='no'
									allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%"
									height="100%">
								</iframe>

								<!-- <iframe
                                        src="http://172.19.44.9:8080/location_op_screen/index_screen.html?initZoom=12&mapMarginLeft=-20&mapMarginTop=-30"
                                        allowTransparency='true' frameborder='no'
                                        allow="geolocation; microphone; camera; midi; encrypted-media;"
                                        width="100%" height="100%">
                                    </iframe> -->
							</div>
						</div>
					</div>


					<!--										<div class="box-head">-->
					<!--											<span class="box-head-title" style="margin-left: .26rem;">当前手术间状态</span>-->
					<!--											<span class="box-head-title-y2">-->
					<!--												<span>共</span>-->
					<!--												<span style="color: #fff;">{{totalRoom}}</span>-->
					<!--												<span>间手术房间</span>-->
					<!--											</span>-->
					<!--										</div>-->
					<!--										<div class="box4-content">-->
					<!--											<div class="box4-content-table">-->
					<!--												<div>-->
					<!--													<span class="box4-text-1">占用(间)</span>-->
					<!--													<span class="box4-text-2" style="color: #FF5067;">{{busyRoom}}</span>-->
					<!--												</div>-->
					<!--												<div>-->
					<!--													<span class="box4-text-1">接台等待(间)</span>-->
					<!--													<span class="box4-text-2" style="color: #FFC420;">{{waitRoom}}</span>-->
					<!--												</div>-->
					<!--												<div>-->
					<!--													<span class="box4-text-1">空闲(间)</span>-->
					<!--													<span class="box4-text-2" style="color: #69EF76;">{{freeRoom}}</span>-->
					<!--												</div>-->
					<!--												&lt;!&ndash; <div>-->
					<!--														<span class="box4-text-1">保洁中(间)</span>-->
					<!--														<span class="box4-text-2" style="color: #0297FD;">{{cleanCount}}</span>-->
					<!--													</div> &ndash;&gt;-->
					<!--											</div>-->

					<!--											<div class="box4-content-map">-->
					<!--												&lt;!&ndash; <iframe-->
					<!--														src="http://192.168.1.144:8848/hsmap/location_op_screen/index_screen.html?initZoom=10&mapMarginLeft=-50&mapMarginTop=-30"-->
					<!--														allowTransparency='true' frameborder='no'-->
					<!--														allow="geolocation; microphone; camera; midi; encrypted-media;"-->
					<!--														width="100%" height="100%">-->
					<!--													</iframe> &ndash;&gt;-->
					<!--												<iframe ref="iframeRef" :src="MapSrc" allowTransparency='true' frameborder='no'-->
					<!--													allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%"-->
					<!--													height="100%">-->
					<!--												</iframe>-->

					<!--												&lt;!&ndash; <iframe-->
					<!--														src="http://172.19.44.9:8080/location_op_screen/index_screen.html?initZoom=12&mapMarginLeft=-20&mapMarginTop=-30"-->
					<!--														allowTransparency='true' frameborder='no'-->
					<!--														allow="geolocation; microphone; camera; midi; encrypted-media;"-->
					<!--														width="100%" height="100%">-->
					<!--													</iframe> &ndash;&gt;-->
					<!--											</div>-->
					<!--										</div>-->
					<!--					竖版-->

					<div v-if="hospitalSwitch === '005' || hospitalSwitch == '003' ">
						<div class="box4-1"
							style="width:25%;height: 5.6rem; float: left;padding-left: 2%;padding-top:0.2rem;margin-left: 2%;margin-top: 2%">
							<div class="box5-head-2">
								<div class="box5-head-title-2">手术室使用情况</div>
								<div class="box5-head-section-2">
									<span class="roomCountText">共 </span>
									<span class="roomCount">{{totalRoom}} </span>
									<span class="roomCountText"> 间手术房间</span>
								</div>


							</div>

							<!--                    <div class="section1">-->
							<div class="text-wrapper_156-1 ">
								<div class="text2-1">占用(间)</div>
								<div class="text-wrapper_19"> {{busyRoom}}</div>
							</div>

							<div class="text-wrapper_156-1 ">
								<div class="text2-1">接台等待(间)</div>
								<div class="text_1901">{{waitRoom}}</div>
							</div>
							<div class="text-wrapper_156-1 ">
								<div class="text2-1">空闲(间)</div>
								<div class="text_y4"> {{freeRoom}} </div>
							</div>
							<!--                    <div class="text-wrapper_157 ">-->
							<!--                        <div class="text2">保洁中(间)</div>-->
							<!--                        <div class="text_y5" style="color: rgba(2, 151, 253, 1)"> {{cleaningRoom}} </div>-->
							<!--                    </div>-->
						</div>
						<div class="mapIframe3">
							<!--						<div-->
							<!--								style="width: 4%;height: 73%;background: linear-gradient(to right, #1E1F25, rgba(0, 0, 0, 0));z-index: 20;position: absolute;">-->
							<!--						</div>-->
							<!--						<div-->
							<!--								style="width: 4%;height: 73%;background: linear-gradient(to left, #1E1F25, rgba(0, 0, 0, 0));z-index: 20;position: absolute;right: 2%;">-->
							<!--						</div>-->
							<!--                    <iframe src="http://192.168.1.144:8848/hsmap/location_op_screen/index_screen.html?initZoom=10&mapMarginLeft=-60&mapMarginTop=-40" allowTransparency='true' frameborder='no'-->
							<!--                     allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%" height="100%"></iframe>-->
							<iframe ref="iframeRef" :src="MapSrc" allowTransparency='true' frameborder='no'
								allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%"
								height="100%"></iframe>

							<!--                    <iframe src="http://192.168.123.2:8080/location_op/index_screen.html?initZoom=12&mapMarginLeft=-20&mapMarginTop=-30" allowTransparency='true' frameborder='no'-->
							<!--                            allow="geolocation; microphone; camera; midi; encrypted-media;" width="100%" height="100%"></iframe>-->
						</div>
					</div>

				</div>

			</li>

			<!-- 右 -->
			<li class="li3">
				<!-- 右上 -->
				<div class="box1" style="height: 4.06rem">
					<div class="box-head" style="justify-content: left;">
						<span @click="toOther" class="box-head-title">其他运营指标（昨日）</span>
						<img @click="toOther" class="image-icon-title" referrerpolicy="no-referrer"
							src="images/Group34194.png">
						<img @click="isShowInfo"
							style="width: .24rem; height: .24rem; position: absolute; right: .2rem;"
							referrerpolicy="no-referrer" src="images/info.png">
					</div>
					<div style="height: 3.46rem; padding: 0.2rem;">
						<div class="right-top-box1">
							<div style="display: flex; align-items: center;">
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/userate.png">
								<span class="rt-box-text1" style="margin-left: 0.1rem;">手术间使用率</span>
							</div>
							<div class="rt-box-text2">{{operatingRoomUseRate}}</div>
						</div>
						<div class="right-top-box2">
							<div class="rt-box2-item show-contents1" style="margin-bottom: .15rem;">
								<div class="info01 show-text">
									<div>患者等待时长:</div>
									<div>∑（同一房间的患者入室时间 - 患者到达缓冲区时间） / 符合条件数量 （急诊除外）</div>
								</div>
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group 34067.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">患者等待时长</span>
									<div style="display: flex; align-items: center; margin-top: 0.08rem;">
										<div class="rt-box-text2" style="margin-left: 0.1rem;">
											{{todayPatientWaitingTime}}
										</div>
										<div class="rt-box-text3">&nbsp;分钟</div>
									</div>
								</div>
							</div>
							<div class="rt-box2-item show-contents2">
								<div class="info02 show-text">
									<div>连台衔接时长:</div>
									<div>∑（同一房间的下台患者入室时间 - 上台患者出室时间） / 符合条件数量 （急诊除外）</div>
								</div>
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group 34067.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">连台衔接时长</span>
									<div style="display: flex; align-items: center; margin-top: 0.08rem;">
										<div class="rt-box-text2" style="margin-left: 0.1rem;">
											{{todayContinuousConnectionTime}}
										</div>
										<span class="rt-box-text3">&nbsp;分钟</span>
									</div>
								</div>
							</div>
							<div class="rt-box2-item show-contents3">
								<div class="info03 show-text">
									<div>麻醉衔接时长:</div>
									<div>∑（同一房间的下台麻醉开始时间 - 上一台离开手术室时间）/ 符合条件数量 （急诊除外）</div>
								</div>
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group 34067.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">麻醉衔接时长</span>
									<div style="display: flex; align-items: center; margin-top: 0.08rem;">
										<div class="rt-box-text2" style="margin-left: 0.1rem;">
											{{todayAnesthesiaConnectionTime}}
										</div>
										<span class="rt-box-text3">&nbsp;分钟</span>
									</div>
								</div>
							</div>
							<div class="rt-box2-item show-contents4">
								<div class="info04 show-text">
									<div>手术衔接时长:</div>
									<div>∑（同一房间的下台手术开始时间 - 上一台手术结束时间）/ 符合条件数量 （急诊除外）</div>
								</div>
								<img class="rt-box-icon" referrerpolicy="no-referrer" src="images/Group 34067.png">
								<div>
									<span class="rt-box-text1" style="margin-left: 0.1rem;">手术衔接时长</span>
									<div style="display: flex; align-items: center; margin-top: 0.08rem;">
										<div class="rt-box-text2" style="margin-left: 0.1rem;">
											{{todayOperationConnectionTime}}
										</div>
										<span class="rt-box-text3">&nbsp;分钟</span>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>

				<!-- 右中 -->
				<div class="box3" style="height: 3.0rem; margin-top: 0.15rem;">
					<div class="box-head">
						<span class="box-head-title">
							近7日总体手术量变化
						</span>
						<!-- <el-select @change="handleSelectChange2" class="my-select2" placeholder="请选择" -->
						<el-select @change="handleSelectChange2" placeholder="请选择" v-model="departmentOptions"
							style="right: 0.2rem">
							<el-option :key="item.departmentNumber" :label="item.departmentName"
								:value="item.departmentNumber" v-for="item in departmentOptionsList"></el-option>
						</el-select>
					</div>
					<div ref="changesInOperVolumeChart" style="width: 100%; height: 2.4rem;"></div>

				</div>

				<!-- 右下-->
				<div class="box3" style="height: 3.0rem;margin-top:0.15rem ;">
					<div class="box-head">
						<div class="box-head" style="justify-content: left;">
							<span class="box-head-title">本月常规工作时段外的手术量</span>

						</div>
					</div>
					<div style="height: 2.8rem;padding-top: 2%">
						<div style="height: 35%; width: 100%; padding: 2% 0 0 6%;position: relative">
							<div style="width: 42%; height:100%; float: left; position: relative;"
								@click="toutoftime('openEarly')">
								<img class="image-icon-y1" alt="图片加载中……" referrerpolicy="no-referrer"
									src="./images/Group 34055.png" style="position: absolute;left: 0">
								<img style="width:0.3rem; height: 0.2rem; position: absolute;left: 42%; top: 27%;"
									referrerpolicy="no-referrer" src="images/Group34194.png">
								<div class="image-icon-y4">
									<span class="runTiao-span-y2">{{earlyCount}}</span>
									<span class="runTiao-span-y3">台</span>

								</div>
								<div style="position:absolute;width:1rem;height: 0.7rem;left: 60%;text-align: left">
									<span class="note-span6" style="line-height: 0.7rem;">早开台</span>

								</div>
							</div>
							<div style="width: 42%;height:100%;float: left;margin-left: 6%;position: relative"
								@click="toutoftime('work18')">
								<img alt="图片加载中……" class="image-icon-y1" referrerpolicy="no-referrer"
									src="./images/Group 34055.png" style="position: absolute;">
								<img style="width:0.3rem; height: 0.2rem; position: absolute;left: 42%; top: 27%;"
									referrerpolicy="no-referrer" src="images/Group34194.png">
								<div class="image-icon-y4">
									<span class="runTiao-span-y2">{{workDayLateEndCount18}}</span>
									<span class="runTiao-span-y3">台</span>
								</div>
								<div
									style="position:absolute;width:1rem;height: 0.7rem;left: 60%;top: 0.18rem;text-align: left">
									<span class="note-span6" style="line-height: 0.2rem;">工作日 <br> 18点未结束</span>
								</div>
							</div>

						</div>
						<div style="height: 30%;width: 100%;padding: 2% 0 0 6%;position: relative">
							<div style="width: 42%;height: 100%;float: left;position: relative"
								@click="toutoftime('work24')">
								<img alt="图片加载中……" class="image-icon-y1" referrerpolicy="no-referrer"
									src="./images/Group 34055.png" style="position: absolute;left: 0">
								<img style="width:0.3rem; height: 0.2rem; position: absolute;left: 42%; top: 27%;"
									referrerpolicy="no-referrer" src="images/Group34194.png">
								<div class="image-icon-y4">
									<span class="runTiao-span-y2">{{workDayLateEndCount24}}</span>
									<span class="runTiao-span-y3">台</span>

								</div>
								<div
									style="position:absolute;width:1rem;height: 0.7rem;left: 60%;top: 0.18rem;text-align: left">
									<span class="note-span6" style="line-height: 0.2rem;">工作日<br /> 24点未结束</span>
								</div>
							</div>
							<div style="width: 42%;height:100%;margin-left: 6%;float: left;position: relative"
								@click="toutoftime('holiday')">
								<img alt="图片加载中……" class="image-icon-y1" referrerpolicy="no-referrer"
									src="./images/Group 34055.png" style="position: absolute">
								<img style="width:0.3rem; height: 0.2rem; position: absolute;left: 42%; top: 27%;"
									referrerpolicy="no-referrer" src="images/Group34194.png">
								<div class="image-icon-y4">
									<span class="runTiao-span-y2">{{holidayCount}}</span>
									<span class="runTiao-span-y3">台</span>

								</div>
								<div
									style="position:absolute;width:1rem;height: 0.7rem;left: 60%;top: 0.18rem;text-align: left">
									<span class="note-span6" style="line-height:0.2rem">本月<br /> 节假日手术量</span>
								</div>
							</div>

						</div>

					</div>


				</div>

			</li>
		</ul>
	</div>

	<script type="text/javascript">
		// 初始化Swiper

		function scrollToLocation() {
			var mainContainer = $('#thisMainPanel'),
				scrollToContainer = mainContainer.find(
					'.son-panel:last'); //滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
			//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
			//非动画效果
			//mainContainer.scrollTop(
			//  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			//);
			//动画效果
			mainContainer.animate({
				scrollTop: mainContainer.find('.son-panel:last').offset().top - mainContainer.offset().top +
					mainContainer.scrollTop()

			}, 3000, function () {

				mainContainer.find(".son-panel:first").appendTo(mainContainer);
				scrollToLocation();
			}); //2秒滑动到指定位置
		}

		function scrollToLocationFrist() {
			var mainContainerF = $('#fristGun'),
				scrollToContainerF = mainContainerF.find(
					'.son-fristGun:last'); //滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
			//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
			//非动画效果
			//mainContainer.scrollTop(
			//  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			//);
			//动画效果
			mainContainerF.animate({
				scrollTop: mainContainerF.find('.son-fristGun:last').offset().top - mainContainerF.offset().top +
					mainContainerF.scrollTop()
			}, 2000, function () {
				mainContainerF.find(".son-fristGun:first").appendTo(mainContainerF);
				scrollToLocationFrist();
			});
		}

		function scrollToLocationFrist2() {
			var mainContainerF2 = $('#fristGun2'),
				scrollToContainerF2 = mainContainerF2.find(
					'.son-fristGun2:last'); //滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
			//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
			//非动画效果
			//mainContainer.scrollTop(
			//  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			//);
			//动画效果
			mainContainerF2.animate({
				scrollTop: mainContainerF2.find('.son-fristGun2:last').offset().top - mainContainerF2.offset().top +
					mainContainerF2.scrollTop()
			}, 2000, function () {
				mainContainerF2.find(".son-fristGun2:first").appendTo(mainContainerF2);
				scrollToLocationFrist2();
			});
		}

		function scrollToLocationNote() {
			var mainContainerN = $('#noteGun'),
				scrollToContainerN = mainContainerN.find(
					'.son-note:last'); //滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
			//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
			//非动画效果
			//mainContainer.scrollTop(
			//  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			//);
			//动画效果
			mainContainerN.animate({
				scrollTop: mainContainerN.find('.son-note:last').offset().top - mainContainerN.offset().top +
					mainContainerN.scrollTop()
			}, 3000, function () {
				mainContainerN.find(".son-note:first").appendTo(mainContainerN);
				scrollToLocationNote();
			});
		}

		new Vue({

			el: '#app',
			data: function () {
				return {


<<<<<<< HEAD
					hospitalSwitch: '005',//医院地图接口选择 /医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
=======
					hospitalSwitch: '003',//医院地图接口选择 /医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
>>>>>>> de3b0fe6ba8c0162c520d676deee41e3b698cada
					// RoomSrc:0,
					RoomUrl: '',
					MapSrc: '',
					httpUrl: '',
					httpUrl2: '',
					initZoom: 0,
					mapMarginLeft: 0,
					MapIp: '',
					mapMarginTop: '',

					isHide: this.getQueryString("isHide") != null ? this.getQueryString('isHide') :
						"0", //是否隐藏医生名字
					nowDate: '',
					nowTime: '',
					surgicalNumber: this.getQueryString("surgicalNumber") != null ? this.getQueryString(
						'surgicalNumber') : "001",
					// surgicalNumberData: JSON.stringify({
					// 	surgicalNumber: "001",
					// }),
					RoomSrc: 0,

					cancle: 0, //取消数
					planCount: 0, //今日全部计划数
					emergencyCount: 0, //急诊数
					ready: 0, //待开始数
					chooseCount: 0, //择期数
					chooseFinished: 0, //择期已经完成数
					emergencyFinished: 0, //紧急已经完成数
					planCountFinished: 0, //今日全部计划数已完成数
					temporaryCount: 0, // 临时数
					temporaryFinished: 0, //临时完成数
					IsTemporaryCompleteRate: 0, //临时完成率

					notStarted: 0,		//未开台的数量
					lateSchedule: 0,	//晚点开台的数量

					punctualCount: 0,
					delayedCount: 0,
					waitingCount: 0,
					SurgeryStopCount: 0,
					secondarySurgery: 0,

					opering: 0, //手术中数
					beforeOper: 0, //术前数
					afterOper: 0, //完成数

					// 左中 近期手术室平均手术结束时间数据
					aetintervalId: null,
					averageEndTimeDates: [],
					averageEndTimeLastlyTimes: [],
					averageEndTimeAverageTimes: [],


					eightyCount: 0, //80岁以上
					fourCount: 0, //四岁以下人数统计
					specialOper: 0, //特殊术式
					specialInfection: 0, //特殊感染人数统计

					noteList: [], //重点关注信息
					openingRateList: [], //首台信息

					OpenedOnSchedule: 0, //准点开台数
					OnTimeOperRate: 0, //准点开台率
					OnTimeOperRate2: 0, //准点开台率 整数
					UnitsToday: 0, //今日首台数
					firstOpeReplacementCount: 0, //首台换台数
					firstOpeReplacementRate: 0, //首台换台率

					// openingRateList2: [], //首台信息2
					// OpenedOnSchedule2: 0, //准点开台数
					// OnTimeOperRate2: 0, //准点开台率
					// OnTimeOperRate22: 0.8, //准点开台率
					// UnitsToday2: 0, //今日首台数


					pointList: [],

					departmentOperY: [],
					departmentOperX: [],

					LateCount: 0, // 晚点结束台数
					PunctualityEndTimeRate: 0, //晚点结束率

					yesterdayEndList: [],

					outputFourCount: 0,
					outputFour: '0%',
					outputThreeCount: 0,
					outputThree: '0%',
					outputTwoCount: 0,
					outputTwo: '0%',
					outputOneCount: 0,
					outputOne: '0%',

					levelList: [],

					width1: 0.25,
					width2: 0.25,
					width3: 0.25,
					width4: 0.25,
					intervals: {},

					emergencyCompleteRate: 0,
					chooseCompleteRate: 0,

					pageDepartmentNow: 1, //科室当前页

					maxCountPart: 0,

					timeLevel: "",

					mapShow: false,

					showList1: false,
					showList12: false,
					showList3: false,
					showList4: false,
					showList5: false,

					hospitalNo: '',

					showShou: true,
					showShou2: true,
					globalShou: true,

					// 中下 当前手术间状态
					waitRoom: 0, //等待接台
					totalRoom: 0, //房间总数
					busyRoom: 0, //占用数
					cleanCount: 0, //保洁数
					freeRoom: 0, //空闲数

					// 右上 - 其他运营指标(昨天)
					operatingRoomUseRate: "0%", //手术间使用率
					todayPatientWaitingTime: 0, //患者等待时长
					todayContinuousConnectionTime: 0, //连台衔接时长
					todayAnesthesiaConnectionTime: 0, //麻醉衔接时长
					todayOperationConnectionTime: 0, //手术衔接时长

					infoShow: false,


					//近期全院总体手术量变化
					departmentOptions: 'all', //初始值
					departmentOptionsList: [ // 可选项列表
						{
							departmentNumber: 'all',
							departmentName: '全部'
						}, //保留
					],
					changesInOperVolumeChartData: [], //台数
					changesInOperVolumeChartDate: [], //日期

					opTimeDistributionData: [1, 2, 3, 4, 5, 6],
					caseUtilizationRateCaseRoomsValue: 0.7,


					earlyCount: 0, // 早开台
					workDayLateStartCount: 0,
					workDayLateEndCount24: 0, // 工作日24点未结束
					workDayLateEndCount18: 0, // 工作日18点未结束
					holidayCount: 0, // 节假日手术量

					connectionAverageTimeList: [],

					// ... 其他数据属性
					timer: null,
					autoSwitchInterval: 5000, // 自动切换间隔时间，单位为毫秒
					currentIndex: "1", // 当前显示的幻灯片索引

					firstOpStartTimeDistributionList: [],

					yAxisMin: 0,
					yAxisMax1: 40, //连台
					yAxisMax2: 40, //患者
					yAxisMax3: 40, //麻醉
					yAxisMax4: 40, //手术

					yAxisMax5: 40, //首台开台时间分布



				}
			},
			created() {
				const urlParams = new URLSearchParams(window.location.search);
				this.surgicalNumber = urlParams.get('surgicalNumber') || "001"; // 获取 URL 中的参数
			},

			mounted() {


				this.init()//初始化ip
				// 时间显示
				setInterval(() => {
					this.setNowTimes()
				}, 1000);
				// this.startAutoSwitch2(); //昨日手术间使用率轮播
				this.getChangesInOperVolume("all"); //近期全院总量
				// this.getCaseUtilizationRateCaseRooms(); // 昨日手术间使用率
				this.averageEndTime(); // ------------------------近期手术室平均手术结束时间
				// this.firstOperStartTimeDistribution() //首台开台时间分布
				this.getHospitalNo();
				//昨日数据查询  1 小时 1次
				setInterval(() => {
					this.getInfoOfLastOutRoom(); //准点结束
					// this.getTurnOverTime(); //翻台
					// this.getCaseUtilizationRateCaseRooms(); // 昨日手术间使用率
					this.getOverallUtilizationRateAllRooms(); //获取昨日全部手术间使用率

				}, 3600000)

				//实时查询 1分钟 1次
				setInterval(() => {
					this.getOperInfoCount();
					this.getOperInfoCountTao(); //手术信息
					// this.getInfoOfOperRoom(); //手术室信息

				}, 60000)

				//实时查询 10秒 1次
				setInterval(() => {
					this.operRoomStateRightNow(); // 获取手术间状态
				}, 10000)

				setInterval(() => { //5分钟
					this.getFirstOpeningRate(); //准点开台
					this.getKeynoteToday(); //重点关注
					this.getInfoOfOpLevelCase(); //手术等级
					this.averageEndTime(); // -----------------------近期手术室平均手术结束时间

				}, 1000 * 60 * 5)

				setTimeout(() => {
					this.operAverageEndTime(); // 左中 近期手术室平均手术结束时间
					this.changesInOperVolumeChart(); // 右中 近7日总体手术量变化

					this.shouDraw(); //今日准点开台率
					// this.levelDraw();  	//左中 环图
					this.operDraw1Draw(); //中上手术已完成百分环
					this.operDraw2Draw(); //中上手术已完成百分环
					// this.opTimeDistribution(this.opTimeDistributionData); //右下 - 首台手术开台时间分布


				}, 200)
				// this.click1();
				this.getOperInfoCount();
				this.getOperInfoCountTao();
				// this.getInfoOfOperRoom();
				this.getKeynoteToday();
				this.getFirstOpeningRate();
				// this.getFirstOpeningRate2();
				// this.getInfoOfLastOutRoom();
				// this.getTurnOverTime(); //昨日翻台
				// this.getDepartmentOper(); //择期手术
				this.getInfoOfOpLevelCase();
				// this.getDurationTimeDistribution() //各种时长分布
				this.getpushDurationTime();

				this.getAllDepartmentInfo(); //获取所有科室信息
				this.operRoomStateRightNow(); // 获取手术间状态
				this.getOverallUtilizationRateAllRooms(); //获取昨日全部手术间使用率
				// this.getPastTwoDaysDepartmentOperCount(); //获取今日昨日手术量
				this.getSurgicalVolumeOutsideRegularHours(); //右中 本月常规工作时段外的手术量
				// this.getFirstOperStartTimeDistribution() //首台手术开台时间分布

				// this.initTaiDraw();


				// this.operDraw3Draw();


				// //首台数据 5秒切换
				// setInterval(() => {
				// 	if(this.hospitalNo=='SZC'){
				//
				// 	}
				// 	if(this.showShou){
				// 		this.showShou=false;
				// 		this.showShou2=true;
				// 		if(this.globalShou){
				// 			let self=this;
				// 			setTimeout(function(){
				// 				self.getFirstOpeningRate2();
				// 			},1000)
				//
				// 			this.globalShou=false;
				// 		}
				// 	}else{
				// 		this.showShou=true;
				// 		this.showShou2=false;
				// 	}
				// }, 10000)


				setTimeout(function () {
					this.showShou2 = false;
				}, 1000)
				// this.initEcharts();

				let self = this;
				//监听地图
				window.addEventListener("message", function (e) {
					console.log(e);
					// self.offMapSwitch = false //停止翻页
					let data = e.data;
					// 过滤：只处理「类型为 string + 是数字格式」的消息
					if (typeof data === 'string' && /^\d+$/.test(data)) {
					    self.RoomSrc = self.RoomUrl + '?roomNo=' + encodeURIComponent(data);
					    self.mapShow = true;
					} else {
					    // 其他类型的消息，不执行 URL 拼接逻辑
					    console.log("忽略非目标消息（如类型为object的控制类消息）");
					}
								
					console.log(data);

				})

				const iframe = this.$refs.iframeRef;
				const resizeObserver = new ResizeObserver(entries => {
					for (const entry of entries) {
						if (entry.target === iframe) {
							const { width, height } = entry.contentRect;
							// 根据 iframe 的大小配置参数
							console.log(width + "," + height);
							self.iframeTest(width, height);

						}
					}
				});
				resizeObserver.observe(iframe);

			},

			methods: {

				init: function () {
					if (this.hospitalSwitch === "000") {
						/* this.MapSrc = "http://192.168.1.144:8848/hsmap/location_op_screen/index_screen.html?initZoom=10&mapMarginLeft=-50&mapMarginTop=-30"
						this.RoomUrl = 'http://192.168.1.169:5500' */

						this.httpUrl = "http://localhost:82"   // httpUrl:"http://172.19.44.5",// httpUrl: "http://172.19.44.9:81",// httpUrl:"http://172.29.1.16",
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';

					} else if (this.hospitalSwitch === "001") {
						this.Mapip = 'http://172.19.44.2:8080/location_op_screen/index_screen.html'

						this.RoomUrl = 'http://172.19.44.5:8080/screen/room_select/index.html'
						this.httpUrl = "http://172.19.44.5:80"
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';

					} else if (this.hospitalSwitch === "002") {
						this.httpUrl = "http://172.16.14.196:82"   // httpUrl:"http://172.19.44.5",// httpUrl: "http://172.19.44.9:81",// httpUrl:"http://172.29.1.16",
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';

						this.Mapip = "http://172.16.14.196:8080/location_op_screen/index_screen.html"
						this.RoomUrl = 'http://172.16.240.73:8080/oriot/room_select/index.html'
					} else if (this.hospitalSwitch === "003") {
<<<<<<< HEAD
						this.httpUrl = "http://222.71.175.10:1111"   // httpUrl:"http://172.19.44.5",// httpUrl: "http://172.19.44.9:81",// httpUrl:"http://172.29.1.16",
=======
						this.httpUrl = "http://222.71.175.10:1111"
>>>>>>> de3b0fe6ba8c0162c520d676deee41e3b698cada
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';
						
						this.Mapip = "http://222.71.175.10:1111/app/hsmap/location_op_screen/index_screen.html"
						this.RoomUrl = 'http://222.71.175.10:1111/app/screen/room_select/index.html'
					} else if (this.hospitalSwitch === "004") {
						this.RoomUrl = 'http://172.29.1.14:8080/screen/room_select/index.html'
						this.Mapip = "http://172.29.0.60:8080/"


						this.httpUrl = "http://172.29.1.16:80"   // httpUrl:"http://172.19.44.5",// httpUrl: "http://172.19.44.9:81",// httpUrl:"http://172.29.1.16",
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';

					} else if (this.hospitalSwitch === "005") {
						this.RoomUrl = 'http://222.71.175.10:1111/app/screen/room_select/index.html'
						this.Mapip = 'http://10.63.68.100:8080/location_op_screen/index_screen.html'

						this.httpUrl = "http://222.71.175.10:1111"
						this.httpUrl2 = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';
					}

				},
				iframeTest(width, height) {
					console.log(width + "," + height);
					/* if (this.hospitalSwitch === "000") {
						let initZoom = "30";
						initZoom = Math.round(((22 - 4) / (1200 - 100)) * (width - 100) + 2);
						this.MapSrc = "http://192.168.1.144:8848/hsmap/location_op_screen/index_screen.html?initZoom=" + initZoom + "&mapMarginLeft=-50&mapMarginTop=-30";

					} else */ if (this.hospitalSwitch === "001") {
						let initZoom = "30";
						initZoom = Math.round(((22 - 4) / (1200 - 100)) * (width - 100) + 2);

						this.MapSrc = this.Mapip + "?initZoom=" + initZoom + "&mapMarginLeft=-50&mapMarginTop=-50&surgicalNumber=" + this.surgicalNumber;
					} else if (this.hospitalSwitch === "002") {
						let initZoom = Math.round(((22 - 4) / (1200 - 100)) * (width - 100) + 7);
						let mapMarginLeft = Math.round(((140 - 0) / (1400 - 400)) * Math.max(0, Math.min(width, 1400) - 550));
						let mapMarginTop = '-10';
						this.MapSrc = this.Mapip + "?initZoom=" + initZoom + "&mapMarginLeft=" + mapMarginLeft + "&mapMarginTop=" + mapMarginTop;
					} else if (this.hospitalSwitch === "003") {
						let initZoom = "40";
						initZoom = Math.round(((40 - 4) / (2000 - 100)) * (width - 100) + 3);
						
						this.MapSrc = this.Mapip + "?initZoom=" + initZoom + "&mapMarginLeft=10&mapMarginTop=-30&surgicalNumber=" + this.surgicalNumber;
					} else if (this.hospitalSwitch === "004") {

						let initZoom = Math.round(((22 - 4) / (1200 - 100)) * (width - 100) + 1.5);
						let mapMarginLeft = Math.round(((140 - 0) / (1400 - 400)) * Math.max(0, Math.min(width, 1400) - 750));
						let mapMarginTop = -80;
						if (width > 900 && width < 1100) {
							mapMarginTop = -110
						} else
							if (width > 700 && width < 900) {
								mapMarginTop = -80
							} else if (width > 500 && width < 700) {
								mapMarginTop = -50
							} else if (width > 300 && width < 500) {
								mapMarginTop = -20
							}


						this.MapSrc = this.Mapip + "/location_op_screen/index_screen.html?initZoom=" + initZoom + "&mapMarginLeft=" + mapMarginLeft + "&mapMarginTop=" + mapMarginTop + "&surgicalNumber=" + this.surgicalNumber;


					} else if (this.hospitalSwitch === "005") {
						let initZoom = "40";
						initZoom = Math.round(((40 - 4) / (2000 - 100)) * (width - 100) + 3);

						this.MapSrc = this.Mapip + "?initZoom=" + initZoom + "&mapMarginLeft=10&mapMarginTop=-30&surgicalNumber=" + this.surgicalNumber;

					}



				},

				// 左上 
				// //获取重点运营指标
				getFirstOpeningRate() {

					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/firstOpeReplacementRate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							console.log("++++++++++++");
							console.log(rep);
							if (rep.code == '1') {
								self.showList12 = true;
								let firstOpeInfo = rep.firstOpeInfo;
								self.OpenedOnSchedule = firstOpeInfo.OpenedOnSchedule; //准点开台数
								self.UnitsToday = firstOpeInfo.UnitsToday; //今日首台数
								self.OnTimeOperRate = firstOpeInfo.OnTimeOperRate; ////准点开台率
								self.notStarted = firstOpeInfo.notStarted; // 未开台(待开)
								self.lateSchedule = firstOpeInfo.lateSchedule; //晚点数量
								self.OnTimeOperRate2 = Math.floor(firstOpeInfo.OnTimeOperRate);

								self.firstOpeReplacementCount = rep.firstOpeReplacementCount //首台换台数
								self.firstOpeReplacementRate = parseFloat(rep
									.firstOpeReplacementRate) //首台换台率   去掉%;
								self.shouDraw();

								/*	let dataList = rep.firstOpeInfo;
									if (dataList.length > 0) {
										self.openingRateList2 = dataList;
										if (dataList.length > 3) {
											setTimeout(function () {
												scrollToLocationFrist2();
											}, 2000);
									
										}
									}
								*/
							} else {
								self.showList12 = false;
							}
						}
					})

				},
				// 左上 今日准点开台率
				shouDraw() {
					const shoucharts = echarts.init(document.getElementById('shouDraw'));
					shoucharts.setOption({
						grid: {
							top: '22%',
							right: '22%', //echarts离容器左侧的距离
						},
						series: [{
							type: 'gauge',
							startAngle: 180,
							endAngle: 0,
							min: 0,
							max: 100,
							splitNumber: 2,
							center: ["47%", "40%"], // 默认全局居中
							radius: '70%', // 仪表盘的在父级中所占的百分比 类似大小
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#21ABB8'
								},
								{
									offset: 1,
									color: '#77E081'
								}
								]),

								// shadowColor: '#5CFF36', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,


							},
							progress: { //光
								show: true,
								roundCap: true,
								width: 16
							},
							pointer: {
								icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
								length: '0%',
								width: 16,
								offsetCenter: [0, '5%']
							},
							axisLine: {
								roundCap: true,
								lineStyle: {
									width: 15, //条宽
									color: [
										[1, '#35363B'],
									]
								},
							},
							axisTick: {
								show: false,
								splitNumber: 2,
								lineStyle: {
									width: 2,
									color: '#999'
								}
							},
							splitLine: {
								show: false,
								length: 20,
								lineStyle: {
									width: 2,
									color: '#999'
								}
							},
							axisLabel: {
								distance: 30,
								color: '#999',
								fontSize: 20,
								show: false
							},
							title: {
								show: false
							},
							detail: {
								show: false
							},
							data: [{
								// value: this.OnTimeOperRate2
								value: this.OnTimeOperRate
							}]
						}]
					});
					window.onresize = function () {
						shoucharts.resize();
					}
				},

				//获取医院编码
				getHospitalNo() {
					const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getHospitalCode';
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								// this.showList1=true;
								this.hospitalNo = response.data.hospitalCode

							}
						}
					}).catch(err => {
						console.log('获取手术信息请求失败')

					})
				},

				offMap() {
					this.mapShow = false;
				},
				openMap() {
					this.mapShow = true;
				},


				getQueryString(name) {
					let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					let r = window.location.search.substr(1).match(reg);
					if (r != null) {
						return unescape(r[2]);
					};
					return null;
				},

				/*	fontSizeDraw(res) {
						let docEl = document.documentElement,
							clientWidth =
							window.innerWidth ||
							document.documentElement.clientWidth ||
							document.body.clientWidth;
						if (!clientWidth) return;
						// 此处的3840 为设计稿的宽度，记得修改！
						let fontSize = clientWidth / 3840;
						return res * fontSize;
>>>>>>> 3364ec4 (ip修改)
					},
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: 100,
						splitNumber: 2,
						center: ["47%", "40%"], // 默认全局居中
						radius: '70%', // 仪表盘的在父级中所占的百分比 类似大小
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: '#21ABB8'
							},
							{
								offset: 1,
								color: '#77E081'
							}
							]),

							// shadowColor: '#5CFF36', //阴影
							// shadowBlur: 10,
							// shadowOffsetX: 2,
							// shadowOffsetY: 2,


						},
						progress: { //光
							show: true,
							roundCap: true,
							width: 16
						},
						pointer: {
							icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
							length: '0%',
							width: 16,
							offsetCenter: [0, '5%']
						},
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 15, //条宽
								color: [
									[1, '#35363B'],
								]
							},
						},
						axisTick: {
							show: false,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							show: false,
							length: 20,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						axisLabel: {
							distance: 30,
							color: '#999',
							fontSize: 20,
							show: false
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							// value: this.OnTimeOperRate2
							value: this.OnTimeOperRate
						}]
					}]
				});
				window.onresize = function () {
					shoucharts.resize();
				}
			},

			//获取医院编码
			getHospitalNo() {
				const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getHospitalCode';
				axios.get(url).then(response => {
					if (response.data) {
						if (response.data.code == '1') {
							// this.showList1=true;
							this.hospitalNo = response.data.hospitalCode

						}
					}
				}).catch(err => {
					console.log('获取手术信息请求失败')

				})
			},

			offMap() {
				this.mapShow = false;
			},
			openMap() {
				this.mapShow = true;
			},


			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				};
				return null;
			},

			/*	fontSizeDraw(res) {
					let docEl = document.documentElement,
						clientWidth =
						window.innerWidth ||
						document.documentElement.clientWidth ||
						document.body.clientWidth;
					if (!clientWidth) return;
					// 此处的3840 为设计稿的宽度，记得修改！
					let fontSize = clientWidth / 3840;
					return res * fontSize;
				},
			*/

				// 左中
				// 左中 近期手术室平均手术结束时间接口
				averageEndTime() {

					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/getAverageEndTime';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++近期手术室平均手术结束时间+++++++");
								console.log(rep.data);
								if (rep.code == '1') {
									let data = rep.data;
									self.averageEndTimeDates = [];
									self.averageEndTimeLastlyTimes = [];
									self.averageEndTimeAverageTimes = [];
									data.forEach(item => {
										// 解析日期字符串
										const date = new Date(item.date);
										// 获取月份和日期
										const month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
										const day = date.getDate();
										// 将月份和日期拼接成 "8.15" 这样的格式
										const formattedDate = `${month}.${day}`;
										// console.log(formattedDate); // 输出 "8.15"
										self.averageEndTimeDates.push(formattedDate);
										self.averageEndTimeLastlyTimes.push(item.lastlyTime);
										self.averageEndTimeAverageTimes.push(item.averageTime);

									});

								}
							}
							setTimeout(() => {
								self.operAverageEndTime();
							}, 200)


						},
						error(rep) {
							console.log(rep + "近期手术室平均手术结束时间 详细信息获取失败");
						}
					})
				},

				// 左中 - 近期手术室平均手术结束时间UI
				operAverageEndTime() {

					const chartContainer = echarts.init(this.$refs.operAverageEndTime);
					chartContainer.clear();
					// var convertedAverageTimes = this.averageEndTimeAverageTimes.map(time => parseInt(time.split(':')[0], 10));
					// var convertedLastlyTimes = this.averageEndTimeLastlyTimes.map(time => parseInt(time.split(':')[0], 10));
					var convertedAverageTimes = this.averageEndTimeAverageTimes.map(time => {
						let [hour, minute] = time.split(':');
						return `${parseInt(hour, 10).toString().padStart(2, '0')}.${minute}`;
					});

					var convertedLastlyTimes = this.averageEndTimeLastlyTimes.map(time => {
						let [hour, minute] = time.split(':');
						return `${parseInt(hour, 10).toString().padStart(2, '0')}.${minute}`;
					});

					chartContainer.setOption({
						color: [
							new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#007CD3'
							},
							{
								offset: 1,
								color: '#3AC9CE'
							}
							]),
							new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#21ABB8'
							},
							{
								offset: 1,
								color: '#77E081'
							}
							])
						],
						grid: {
							left: '10%',
							right: '10%',
							top: '20%',
							bottom: '20%'
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: this.averageEndTimeDates,

							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#B0B8CD',
								fontSize: 8,
							}
						},
						yAxis: {
							margin: 10,
							type: 'value',
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								color: '#B0B8CD',
								fontSize: 8,
								formatter: function (value) {
									let parts = value.toString().split(':');
									return parts[0];
								}
							},
							splitLine: {
								lineStyle: {
									type: 'dashed',
									color: '#3C4254'
								}
							},
							max: 'dataMax',
							min: 'dataMin',

						},
						series: [
							{
								name: '最后一台结束时间',
								// data: this.averageEndTimeLastlyTimes,
								data: convertedLastlyTimes,
								type: 'line',
								smooth: true,
								symbol: 'emptyCircle',
								showSymbol: false,
								lineStyle: {
									width: 3
								},
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(34,52,56,0.8)'
									},
									{
										offset: 1,
										color: 'rgba(34,52,56,0)'
									}
									])
								},

							},
							{
								name: '平均结束时间',
								// data: this.averageEndTimeAverageTimes,
								data: convertedAverageTimes,
								type: 'line',
								smooth: true,
								symbol: 'emptyCircle',
								showSymbol: false,
								lineStyle: {
									width: 3
								},
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(38, 58, 58, 0.8)'
									},
									{
										offset: 1,
										color: 'rgba(38, 58, 58, 0)'
									}
									])
								},

							},
						],
						legend: {
							icon: 'roundRect',
							itemHeight: 4,
							itemWidth: 12,
							textStyle: {
								color: '#fff',
								fontSize: 10,
							},
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'line',
								lineStyle: {
									type: 'dashed',
									color: '#007CD3',
									width: 1
								}
							},
							backgroundColor: 'transparent',
							borderColor: 'transparent',
							padding: [0, 0, 0, 0],
							formatter: (params) => {
								var timeStr1 = this.averageEndTimeAverageTimes[params[0].dataIndex];
								var timeStr2 = this.averageEndTimeLastlyTimes[params[0].dataIndex];

								const convertTime = (time) => {
									let [hour, minute] = time.split(':');
									hour = parseInt(hour, 10);
									minute = parseInt(minute, 10);

									// 如果小时数大于或等于 24，转换为次日的时间
									if (hour >= 24) {
										hour -= 24;
										return `次日${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
									} else {
										return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
									}
								};

								// 转换时间格式
								timeStr1 = convertTime(timeStr1);
								timeStr2 = convertTime(timeStr2);

								return `
									<div style="font-size: .125rem; color: #fff;">
										<span style="color: #0096FF;">${timeStr2}</span><br/>
										<span style="color: #30E0A1;">${timeStr1}</span>
									</div>
								`;
							},

							position: (pos, params, dom, rect, size) => {
								const [x, y] = pos;
								return [x + 5, y - 20];
							}
						}
					});
					// 清除旧的定时器
					if (this.aetintervalId) {
						clearInterval(this.aetintervalId);
					}

					// 定时切换tooltip
					var currentIndex = 0; //播放所在下标
					this.aetintervalId = setInterval(function () {
						chartContainer.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: currentIndex
						});
						currentIndex = (currentIndex + 1) % 7; // 循环显示
					}, 2000);

					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},


				//左下 - 今日重点关注		
				getKeynoteToday() {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/getKeynoteToday';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url: url, //这里是请求后台的上传文件接口,本地
						type: 'POST',
						dataType: 'json',
						cache: false,
						data: JSON.stringify(requestData),
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							if (res.data) {
								console.log("+++++++ 今日重点关注 ++++++");
								console.log(res.data1);
								if (res.code == '1') {
									self.showList5 = true;
									if (res.data1) {
										let data = res.data1;
										self.specialOper = data.SpecialOper; //特殊术式人数统计
										self.specialInfection = data.SpecialInfection; //特殊感染人数统计
										self.fourCount = data.fourCount; //四岁以下人数统计
										self.eightyCount = data.eightyCount; //八十岁以上人数统计

										let dataList = res.data;
										console.log(dataList);
										if (dataList.length > 0) {
											self.noteList = dataList;
											if (dataList.length > 3) {
												setTimeout(function () {
													scrollToLocationNote();
												}, 3000);
											}

										}
									}

								}
							}
						}
					})


				},

				// 中上 手术等级
				getInfoOfOpLevelCase() {
					// const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getInfoOfOpLevel?surgicalNumber=' + this.surgicalNumber;

					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/getInfoOfOpLevelCase';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url: url,
						type: 'POST',
						dataType: 'json',
						cache: false,
						data: JSON.stringify(requestData),
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep) {
								if (rep.code == '1') {
									// self.levelDraw();    					//左中 环图
									if (rep.data1) {
										let data = rep.data1;
										self.outputFourCount = data.outputFourCount;
										self.outputFour = data.outputFour;
										self.outputThreeCount = data.outputThreeCount;
										self.outputThree = data.outputThree;
										self.outputTwoCount = data.outputTwoCount;
										self.outputTwo = data.outputTwo;
										self.outputOneCount = data.outputOneTwoCount;
										self.outputOne = data.outputOne;
									}
								}
							}
						}
					})
				},

				//中上手术已完成百分环

				operDraw1Draw() {

					var oper1charts = echarts.init(document.getElementById('operDraw1'))
					const gaugeData = [{
						value: this.chooseCompleteRate,
					},

					];
					oper1charts.setOption({
						series: [{
							type: 'gauge',
							startAngle: 90,
							endAngle: -270,
							pointer: {
								show: false
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#3AC9CE'
								},
								{
									offset: 1,
									color: '#007CD3'
								}
								]),

							},

							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 1,
								},
							},
							axisLine: {
								lineStyle: {
									width: 3,
									color: [
										[1, '#3C4254'],
									]
								},
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {

								show: false,
								distance: 50
							},
							data: gaugeData,
							title: {
								fontSize: 14
							},

							detail: {

								show: false,
								width: 50,
								height: 14,
								fontSize: 14,
								color: 'inherit',
								borderColor: 'inherit',
								borderRadius: 20,
								borderWidth: 1,
								formatter: '{value}%'
							}
						}]
					})
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								oper1charts.resize()
							}, 100)
						},
						false,
					)
				},

				operDraw2Draw() {

					var oper2charts = echarts.init(document.getElementById('operDraw2'))
					const gaugeData1 = [{
						value: this.emergencyCompleteRate,
					},

					];
					oper2charts.setOption({
						series: [{
							type: 'gauge',
							startAngle: 90,
							endAngle: -270,
							pointer: {
								show: false
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#3AC9CE'
								},
								{
									offset: 1,
									color: '#007CD3'
								}
								]),

							},

							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 1,
								},
							},
							axisLine: {
								lineStyle: {
									width: 3,
									color: [
										[1, '#3C4254'],
									]
								},
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {

								show: false,
								distance: 50
							},
							data: gaugeData1,
							title: {
								fontSize: 14
							},

							detail: {

								show: false,
								width: 50,
								height: 14,
								fontSize: 14,
								color: 'inherit',
								borderColor: 'inherit',
								borderRadius: 20,
								borderWidth: 1,
								formatter: '{value}%'
							}
						}]
					})
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								oper2charts.resize()
							}, 100)
						},
						false,
					)
				},

				// 中上 获取时间
				setNowTimes() {
					let myDate = new Date();
					let wk = myDate.getDay();
					let yy = String(myDate.getFullYear());
					// let mm = myDate.getMonth() + 1;
					let mm = String(myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() +
						1);
					let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
					let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
					let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
					let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
					let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
					let week = weeks[wk];
					this.nowDate = yy + '-' + mm + '-' + dd + ' ' + week + ' ';
					this.nowTime = hou + ':' + min + ':' + sec;
					// this.nowTime = hou + ':' + min;
				},

				//获取手术信息
				getOperInfoCount() {
					let self = this;
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/getOperPlanCount';
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url: url, //这里是请求后台的上传文件接口,本地
						type: 'POST',
						dataType: 'json',
						cache: false,
						data: JSON.stringify(requestData),
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							if (res.data) {
								console.log("手术信息数量1+++++++++++++");
								console.log(res.data);
								if (res.code == '1') {
									let data = res.data;
									self.cancle = data.cancel; //取消数
									self.planCount = data.planCount; //今日全部计划数
									self.emergencyCount = data.emergencyCount; //急诊数
									self.ready = data.ready; //待开始数
									self.chooseCount = data.chooseCount; //择期数
									self.chooseFinished = data.chooseFinished; //择期已经完成数
									self.emergencyFinished = data.emergencyFinished; //紧急已经完成数
									self.planCountFinished = data.planCountFinished; //今日全部计划数已完成数
									self.emergencyCompleteRate = data.emergencyCompleteRate; //急诊数量的比例
									self.chooseCompleteRate = data.chooseCompleteRate; //择期数量的比例
									self.temporaryCount = data.temporaryCount; //// 临时数
									self.temporaryFinished = data.temporaryFinished; //临时完成数
									self.IsTemporaryCompleteRate = data.IsTemporaryCompleteRate; //临时完成率
									self.operDraw1Draw();
									self.operDraw2Draw();
								}
							}
						}
					})

				},

				//获取手术信息中间条
				getOperInfoCountTao() {
					let self = this;
					// const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getStateX?surgicalNumber=' + this.surgicalNumber;
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/getStateX';
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url: url, //这里是请求后台的上传文件接口,本地
						type: 'POST',
						dataType: 'json',
						cache: false,
						data: JSON.stringify(requestData),
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							if (res.data) {
								console.log("+++++获取手术信息中间条+++++++");
								console.log(res.data);
								if (res.code == '1') {
									let data = res.data;
									self.cancle = data.cancle; //取消数
									self.opering = data.opering; //手术中数
									self.beforeOper = data.beforeOper; //术前数
									self.afterOper = data.afterOper //完成数
									let data1 = res.data1;
									let dataAll = self.planCount;
									self.width4 = data1.cancleRate + 0.1; //取消数
									self.width3 = data1.afterOperrate + 0.1; //完成数
									self.width2 = data1.operingrate + 0.1; //手术中数
									self.width1 = data1.beforeOperrate + 0.1; //术前数
									// self.width4 = Number(data1.cancleRate) * 100; //取消数
									// self.width3 = Number(data1.afterOperrate) * 100; //完成数
									// self.width2 = Number(data1.operingrate) * 100; //手术中数
									// self.width1 = Number(data1.beforeOperrate) * 100; //术前数
									// this.width4 = Number(data.cancel)/Number(dataAll) * 100; //取消数
									// this.width2 = Number(data.opering)/Number(dataAll) * 100; //手术中数
									// this.width1 = Number(data.beforeOper)/Number(dataAll)  * 100; //术前数
									// this.width3 = Number(data.afterOper)/Number(dataAll) * 100 ; //完成数
								}
							}
						}
					})

				},


				//获取今日择期手术量
				/*					getDepartmentOper() {
										const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getDepartmentOper?page=' + this.pageDepartmentNow + '&surgicalNumber=' + this.surgicalNumber;
										axios.get(url).then(response => {
											if (response.data) {
												console.log("++++++++++++科室信息");
												console.log(response.data);
												if (response.data.code == '1') {
													let departmentOperY = response.data.data1;
													let departmentOperX = response.data.data;
													this.maxCountPart = response.data.maxCount;
									
													// if (departmentOperX.length<6) {
													// 	for(let i=departmentOperX.length;i<6;i++){
													// 		departmentOperX.push('');
													// 	}
													// }
													// if (departmentOperY.length<6) {
													// 	for(let i=departmentOperY.length;i<6;i++){
													// 		departmentOperY.push('');
													// 	}
													// }
													this.departmentOperY = departmentOperY.reverse();
													this.departmentOperX = departmentOperX.reverse();
													let departmentCount = response.data.totalcount;
													console.log("departmentCount：" + departmentCount);
													let page = 1;
													if (departmentCount % 6 != 0) {
														page = Math.floor(departmentCount / 6 + 1);
													} else {
														page = Number(departmentCount / 6);
													}
									
									
													if (this.pageDepartmentNow < page) { //当当前页小于最大页是  当前页+1
														this.pageDepartmentNow++;
													} else { //否则当前页为1
														this.pageDepartmentNow = 1;
													}
													console.log("page：" + page);
									
													this.departmentDraw();
												}
											}
										}).catch(err => {
											console.log('获取手术信息请求失败')
									
										})
									},
				*/

				//结束统计图
				endDraw() { },

				// 监测容器尺寸改变
				observeResize() {
					const or = new ResizeObserver(entries => {
						clearTimeout(this.timer)

						this.timer = setTimeout(() => {
							this.shouDraw && this.shouDraw.resize()
						}, 100)
					})

					or.observe(document.getElementById('shouDraw'))
				},


				//中下 当前手术间状态
				//获取手术室使用情况
				operRoomStateRightNow() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/operRoomStateRightNow';

					// const url = 'http://172.19.44.5:80/oriot_op/api/screenr/operRoomStateRightNow449';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++手术房间的状态统计+++++++");
								console.log(rep.data);
								if (rep.code == '1') {
									let data = rep.data;
									self.waitRoom = data.wait; // 等待接台
									self.totalRoom = data.total; // 房间总数
									self.busyRoom = data.busy; // 占用数
									self.cleanCount = data.cleanCount; // 保洁数
									self.freeRoom = data.free; // 空闲数
								}
							}
						},
						error(rep) {
							console.log(rep + "手术房间的状态统计 详细信息获取失败");
						}
					})
				},

				// 右上 其他运营指标
				toOther() {
					// window.location.href = 'otherOperIndex.html';
					const url = `otherOperIndex.html?surgicalNumber=${encodeURIComponent(this.surgicalNumber)}`;
					window.location.href = url;
				},
				isShowInfo() {
					this.infoShow = !this.infoShow;
				},
				/* 右上 其他运营指标-手术间使用率 */

				//获取昨日全部手术间使用率 
				getOverallUtilizationRateAllRooms() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/overallUtilizationRateAllRoomGet';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: "yesterday",
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取昨日全部手术间使用率++++++++");
							console.log(res.data);
							if (res.code == '1') {
								if (Object.keys(res.data).length === 0) {
									self.operatingRoomUseRate = '--';
								} else {
									self.operatingRoomUseRate = res.data;
								}


							}
						},
						error(err) {
							console.log('获取昨日全部手术间使用率信息请求失败')
						}
					});

				},

				/* 右上 其他运营指标-平均等待时长*/
				getpushDurationTime() {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/pushDurationTime';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							console.log("+++++获取平均等待时长++++++++");
							console.log(res.data);
							if (res.code == '1') {
								let data = res.data;
								self.todayPatientWaitingTime = data.todayPatientWaitingTime;
								self.todayContinuousConnectionTime = data.todayContinuousConnectionTime;
								self.todayAnesthesiaConnectionTime = data.todayAnesthesiaConnectionTime;
								self.todayOperationConnectionTime = data.todayOperationConnectionTime;
							}
						},
						error(err) {
							console.log('获取获取平均等待时长请求失败')
						}
					})

				},

				// 右中 近7日总体手术量变化
				/* 获取所有科室信息  { 名称 编号 } 列表 */
				getAllDepartmentInfo() {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/allDepartmentInfo';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						success(res) {
							console.log("+++++获取所有科室信息++++++++");
							console.log(res.data);
							if (res.code == '1') {
								self.showList1 = true;
								let data = [];
								data.push({
									departmentNumber: 'all',
									departmentName: '全部'
								})
								res.data.forEach(item => {
									data.push(item)
								})
								self.departmentOptionsList = data;

							}
						},
						error(err) {
							console.log('获取获取所有科室信息请求失败')
						}
					});

				},
				/* 近7日总体手术量变化 */
				getChangesInOperVolume(department) {
					// const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/changesInOperVolumeGY';
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/changesInOperVolume';
					let self = this;
					let param = {
						"surgicalNumber": this.surgicalNumber,
						"departmentNumber": department,
					};

					$.ajax({
						url: url,
						type: "POST",
						// contentType: "application/json",
						dataType: 'json',
						data: JSON.stringify(param), // 确保请求体为JSON字符串
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							console.log("+++++近期全院总体手术量变化++++++++");
							console.log(res.data);

							let operDateList = []; //时间
							let operCountList = []; //数量

							if (res.code == '1') {
								let data = res.data;
								data.forEach(item => {
									// 解析日期字符串
									const date = new Date(item.operDate);
									// 获取月份和日期
									const month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
									const day = date.getDate();
									// 将月份和日期拼接成 "8.15" 这样的格式
									const formattedDate = `${month}.${day}`;
									// console.log(formattedDate); // 输出 "8.15"

									operDateList.push(formattedDate)
									operCountList.push(item.operCount)
								})
								self.changesInOperVolumeChartData = operCountList
								self.changesInOperVolumeChartDate = operDateList

								self.changesInOperVolumeChart(); // UI
							}
						},
						error(err) {
							console.log('获取近期全院总体手术量变化信息请求失败');
						}
					});

				},
				/* 近7日总体手术量变化 UI */
				changesInOperVolumeChart() {
					const chartContainer = echarts.init(this.$refs.changesInOperVolumeChart);
					chartContainer.clear();
					chartContainer.setOption({
						grid: {
							top: "15%",
							bottom: "5%",
							left: "6%",
							right: "6%",
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: this.changesInOperVolumeChartDate,
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							splitLine: {
								show: false // 不显示网格线
							},
							axisLine: {
								show: false
							},
							axisLabel: {
								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
							}
						},
						yAxis: {
							type: 'value',
							boundaryGap: [0, '50%'],
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {
								show: false,
								textStyle: {
									fontSize: 8,
									color: 'rgba(176, 184, 205, 1)'
								},
								formatter: function (value) {
									return Math.floor(value) + '台';
								},
								interval: function (index, value) {
									return index % Math.ceil(this.axisLabel.length / 5) === 0;
								}
							},
							// splitNumber: 5,
							min: 0,
							minInterval: 1

						},
						series: [{
							data: this.changesInOperVolumeChartData,
							type: 'bar',
							stack: 'Total',
							barMaxWidth: "15", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50

							itemStyle: {
								barBorderRadius: [9, 9, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(0, 124, 211, 1)'
							},
							{
								offset: 1,
								color: 'rgba(59, 199, 207, 1)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								// fontWeight: 'bold',
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
								// borderWidth: 4
							},

						}]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},
				/* 近7日总体手术量变化 下拉框 */
				handleSelectChange2(value) {
					this.departmentOptions = value;
					this.getChangesInOperVolume(value);
				},


				//右下 本月常规工作时段外的手术量
				// toutoftime() {
				// 	window.location.href = 'outoftime.html';
				// },
				toutoftime(paramValue) {
					const url = `outoftime.html?param=${encodeURIComponent(paramValue)}&surgicalNumber=${encodeURIComponent(this.surgicalNumber)}`;
					window.location.href = url;
				},

				getSurgicalVolumeOutsideRegularHours() {
					const url = this.httpUrl +
						`/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursGet?surgicalNumber=${this.surgicalNumber}`;
					let self = this;
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						success(res) {
							console.log("+++++本月常规工作时段外的手术量变化++++++++");
							console.log(res);
							if (res.code == '1') {
								self.earlyCount = res.data.earlyCount;
								self.workDayLateStartCount = res.data.workDayLateStartCount;
								self.workDayLateEndCount24 = res.data.workDayLateEndCount24;
								self.workDayLateEndCount18 = res.data.workDayLateEndCount18;
								self.holidayCount = res.data.holidayCount;
							}
						},
						error(err) {
							console.log('获取本月常规工作时段外的手术量信息请求失败')
						}
					})

				},

			},

			beforeDestroy() {
				if (this.echartsInstance) {
					this.echartsInstance.dispose();
				}
				if (this.echartsInstance2) {
					this.echartsInstance2.dispose();
				}


				// 组件销毁前清除定时器
				this.stopAutoSwitch();

			},

		})
	</script>

	<style type="text/css">
		.el-input {
			font-size: 0.13rem;
		}

		.el-input--suffix .el-input__inner {
			padding-right: 5px;
		}

		.el-input__inner {
			-webkit-appearance: none;
			background-color: #1E1F25 !important;
			border-radius: 4px;
			border: 1px solid #52555b;
			box-sizing: border-box;
			color: #B0B8CD;
			display: inline-block;
			font-size: inherit;
			height: 0.3rem !important;
			width: 1.2rem !important;
			line-height: 1.5rem;
			outline: 0;
			padding-left: 5px;
			transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		}

		.el-input__icon {
			height: 100%;
			width: .3rem;
			transform-origin: center;
			text-align: center;
			-webkit-transition: all .3s;
			transition: all .3s;
			line-height: .1rem;
			background: url("images/Polygon1.png") no-repeat scroll right center transparent;
			color: #007CD3;
			margin-right: 0.05rem;
		}

		.el-icon-arrow-up:before {
			content: none;
		}

		.el-popper[x-placement^=bottom] {
			margin-top: 0 !important;
			border: 1px solid #52555b;
		}

		.popper__arrow {
			display: none !important;
		}

		.popper__arrow::after {
			display: none !important;
			position: relative;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: dashed;
		}

		.el-select-dropdown {
			width: 1.2rem;
			margin: 0;

		}

		.el-select-dropdown__list {
			background-color: #000000;
			width: 100%;
			padding: 0;

		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background-color: #000000;
			color: #3AC9CE;
		}

		.el-select-dropdown__item {
			font-size: 0.13rem;
			background-color: #1E1F25;
			height: 0.3rem;
			line-height: 0.3rem;
			padding: 0 5px;

			#span {
				color: #d2d6e2 !important;
			}
		}

		.el-select-dropdown__wrap {
			max-height: 2rem;
		}

		.note-div-span {
			position: absolute;
			top: 45%;
			left: 32%;
		}

		.note-span1 {
			color: #fff;
			font-size: 0.2rem;
			font-weight: 600;
		}

		.note-span2 {
			color: rgba(176, 184, 205, 1);
			font-size: 0.12rem;
		}

		.note-span2y {
			color: rgba(255, 255, 255, 1);
			font-size: 0.15rem;
		}

		.note-span3 {
			/*text-align: center;*/
			line-height: 0.35rem;
			/*left: 25%;*/
			color: #B0B8CD;
			font-size: 0.15rem;
			/*text-align: center;*/
		}

		.note-span4 {
			position: absolute;
			top: 5%;
			left: 25%;
			color: #B0B8CD;
			font-size: 0.15rem;
		}

		.note-span5 {
			position: absolute;
			top: 15%;
			left: 30%;
			color: #B0B8CD;
			font-size: 0.16rem;
		}

		.note-span6 {
			color: #B0B8CD;
			font-size: 0.15rem;
		}
	</style>
</body>

</html>